<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="./css/base.css" type="text/css">
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<link rel="stylesheet" href="./css/header.css" type="text/css">
	<link rel="stylesheet" href="./css/login.css" type="text/css">
	<link rel="stylesheet" href="./css/footer.css" type="text/css">
	<style>
		#captcha {
            width: 300px;
            display: inline-block;
        }
		label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        #text {
            height: 42px;
            width: 298px;
            text-align: center;
            border-radius: 2px;
            background-color: #F3F3F3;
            color: #BBBBBB;
            font-size: 14px;
            letter-spacing: 0.1px;
            line-height: 42px;
        }

        #wait {
            display: none;
            height: 42px;
            width: 298px;
            text-align: center;
            border-radius: 2px;
            background-color: #F3F3F3;
        }

        .loading {
            margin: auto;
            width: 70px;
            height: 20px;
        }

        .loading-dot {
            float: left;
            width: 8px;
            height: 8px;
            margin: 18px 4px;
            background: #ccc;

            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;

            opacity: 0;

            -webkit-box-shadow: 0 0 2px black;
            -moz-box-shadow: 0 0 2px black;
            -ms-box-shadow: 0 0 2px black;
            -o-box-shadow: 0 0 2px black;
            box-shadow: 0 0 2px black;

            -webkit-animation: loadingFade 1s infinite;
            -moz-animation: loadingFade 1s infinite;
            animation: loadingFade 1s infinite;
        }

        .loading-dot:nth-child(1) {
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            animation-delay: 0s;
        }

        .loading-dot:nth-child(2) {
            -webkit-animation-delay: 0.1s;
            -moz-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .loading-dot:nth-child(3) {
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .loading-dot:nth-child(4) {
            -webkit-animation-delay: 0.3s;
            -moz-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
		@-webkit-keyframes loadingFade {
            0% { opacity: 0; }
            50% { opacity: 0.8; }
            100% { opacity: 0; }
        }

        @-moz-keyframes loadingFade {
            0% { opacity: 0; }
            50% { opacity: 0.8; }
            100% { opacity: 0; }
        }

        @keyframes loadingFade {
            0% { opacity: 0; }
            50% { opacity: 0.8; }
            100% { opacity: 0; }
        }
	</style>
</head>
<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="./imgs/logo.png" alt="京西商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10 regist">
		<div class="login_hd">
			<h2>手机注册</h2>
			<b></b>
		</div>
		<div class="login_bd" >
			<div style="display: flex;flex-direction:column;justify-content: space-around;align-items: center;height: 200px;">
				<p>
					手机号
					<input type="text"name="">
				</p>
				<p>
					<div>
						<label>完成验证：</label>
						<div id="captcha">
							<div id="text">
								行为验证™ 安全组件加载中
							</div>
							<div id="wait" class="show">
								<div class="loading">
									<div class="loading-dot"></div>
									<div class="loading-dot"></div>
									<div class="loading-dot"></div>
									<div class="loading-dot"></div>
								</div>
							</div>
						</div>
					</div>
				</p>
				<p style="position: relative;">
					验证码
					<input type="text"name="">
					<button style="position: absolute;right:0;top: -2px;">获取验证码</button>
				</p>
				<p>
					密码
					<input type="text"name="">
				</p>
				<p>
					<input type="submit"value="快速注册">
				</p>
			</div>
		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="./imgs/xin.png" alt="" /></a>
			<a href=""><img src="./imgs/kexin.jpg" alt="" /></a>
			<a href=""><img src="./imgs/police.jpg" alt="" /></a>
			<a href=""><img src="./imgs/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
	<script src="./captcha/jquery.js"></script>
	<script src="./captcha/gt.js"></script>

	<script>
		let num=5
		let t

		var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });

		$(".login_bd button").click(function(){
			let mobile = $('input[name=mobile]').val()
			if (!/^1\d{10}$/.test(mobile)) return alert('手机号有误')
			var result = captchaObj.getValidate();
			if (!result) return alert('请完成验证');

			$.post("http://kg.zhaodashen.cn/v1/public/sendMsg.jsp",{mobile},res=>{
				if(res.meta.state==201){
					t=setInterval(() => {
						if(num<1){
							$(this).text(`获取验证码`)
							clearInterval(t)
							num=5
							$(this).removeAttr("disabled")
						}else{
							$(this).text(`重新获取(${num--})`)
							$(this).prop("disabled","disabled")
						}	
					}, 1000);
				}else{
					alert(res.meta.msg)
				}
			},"json")
			
		})
		$("input[type=submit]").click(function(e){
			e.preventDefault()
			let mobile=$(".login_bd input:eq(0)").val()
			if (!/^1\d{10}$/.test(mobile)) return alert('手机号有误')
			var result = captchaObj.getValidate();
			if (!result) return alert('请完成验证');
			let code=$(".login_bd input:eq(1)").val()
			let pwd=$(".login_bd input:eq(2)").val()
			if (!/^\d{4}$/.test(code)) return alert('验证码有误')
			$.post("http://kg.zhaodashen.cn/v1/public/reg2.jsp",{mobile,pwd,code},res=>{
				if(res.meta.state==201){
					alert("注册成功，跳转到登录界面")
					location.href="./login.html"
				}else(
					alert(res.meta.msg)
				)
		},"json")
		})
		window.gt = captchaObj;
	};
		$.ajax({
        url: "https://www.geetest.com/demo/gt/register-slide?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {

            $('#text').hide();
            $('#wait').show();
            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                product: "popup", // 产品形式，包括：float，popup
                width: "300px",
                https: true

                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });


	
// 	var handlerPopup = function (captchaObj) {
// // 成功的回调
// captchaObj.onSuccess(function () {
// var validate = captchaObj.getValidate();
// $.ajax({
// url: url,
// type: "post",
// dataType: "json",
// data: {
// geetest_challenge: validate.geetest_challenge,
// geetest_validate: validate.geetest_validate,
// geetest_seccode: validate.geetest_seccode
// },
// success: function (data) {//请求成功
// if (data.status == 2) {//假设status=2代表错误
// captchaObj.refresh();//刷新验证码
// }
// }
// });
// });
// };
	</script>
</body>
</html>